<template>
    <div class="todo-app">
      <h2>待办事项列表 (Todo List)</h2>
      <input type="text" v-model="newTodo" placeholder="输入待办事项" @keyup.enter="handleAddTodo" />
      <button @click="handleAddTodo">添加事项</button>
      <ul>
        <li v-for="todo in todos" :key="todo.id" style="position: relative;" :class="{ 'completed': todo.isCompleted, 'editing': todo.isEditing }">
          <input type="checkbox" :id="todo.id" :checked="todo.isCompleted" @change="toggleCompleted(todo.id)" />
          <label v-if="!todo.isEditing" :for="todo.id">{{ todo.title }}</label>
          <input v-else type="text" :value="todo.editingTitle" @input="(event) => updateEditingTodo(todo, event.target.value)" @blur="() => finishEdit(todo)" @keyup.enter="() => finishEdit(todo)" />
            <div class="w">
                <button  @click="() => removeTodo(todo.id)">删除</button>
          <button @click="() => startEdit(todo)">编辑</button>
            </div>
        </li>
      </ul>
      <button @click="clearCompleted">清除所有已完成</button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const todos = ref([]);
  const newTodo = ref('');
  
  const handleAddTodo = () => {
    const title = newTodo.value.trim();
    if (title) {
      todos.value.push({
        id: Date.now(),
        title,
        isCompleted: false,
        isEditing: false,
        editingTitle: ''
      });
      newTodo.value = '';
    }
  };
  
  const removeTodo = (id) => {
    todos.value = todos.value.filter(todo => todo.id !== id);
  };
  
  const toggleCompleted = (id) => {
    const index = todos.value.findIndex(todo => todo.id === id);
    if (index !== -1) {
      todos.value[index].isCompleted = !todos.value[index].isCompleted;
    }
  };
  
  const clearCompleted = () => {
    todos.value = todos.value.filter(todo => !todo.isCompleted);
  };
  
  const startEdit = (todo) => {
    todo.isEditing = true;
    todo.editingTitle = todo.title;
  };
  
  const updateEditingTodo = (todo, newValue) => {
    todo.editingTitle = newValue;
  };
  
  const finishEdit = (todo) => {
    if (todo.editingTitle.trim()) {
      todo.title = todo.editingTitle;
    }
    todo.isEditing = false;
  };
  </script>
  <style scoped>
  </style>
<style scoped>
.w{
    position: absolute;
    right: 0;

}
.todo-app {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

input[type='text'],
input[type='checkbox'],
button {
  margin: 0.5rem 0.25rem;
}

input[type='text'] {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc(100% - 1rem);
}

button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #aaa;
  cursor: not-allowed;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

li.editing input[type='text'] {
  margin-left: 0.5rem;
}

li.completed label {
  text-decoration: line-through;
  color: #6c757d;
}

li .editing {
  border: 1px solid #ffbc42;
  background-color: #ffecb5;
}
</style>